<template>
  <div>
    <Row>
      <!--      这里span要13 因为局面分有可能带小数点-->
      <Col span="13">
        <Button type="primary" shape="circle" @click="newGame">新的对局</Button>
        <Button type="primary" shape="circle" @click="setBack">{{ back }}</Button>
        <Button type="primary" shape="circle" @click="setStep">{{ step }}</Button>
        <Button type="primary" shape="circle" @click="saveFgn" :disabled="saveDisabled">保存开局</Button>
        <Button type="success" shape="circle" @click="analyze" :loading="analyzeLoading">分析</Button>
        <b>局面分:{{ score }}</b>
      </Col>
      <Col span="11">
        <Progress :percent="scorePercent" :hide-info="true" status="active"/>
      </Col>
    </Row>
    <Modal
        v-model="modalSaveFgn"
        title="请输入对局的名称"
        @on-ok="ok(formFgn)"
        @on-cancel="cancel">
      <Form ref="formFgn" :model="formFgn" label-position="left" :label-width="100">
        <FormItem label="局面名称" prop="name">
          <Input v-model="formFgn.name" placeholder="请输入开局名"></Input>
        </FormItem>
        <FormItem label="局面名称En" prop="nameEn">
          <Input v-model="formFgn.nameEn" placeholder="请输入开局名"></Input>
        </FormItem>
      </Form>
    </Modal>


    <p></p>
    <Table :show-header="false" :columns="openingColumn" :data="openingData" width="800"></Table>
  </div>
</template>

<script>
import bus from 'emitvue';
import * as utils from './utils.js';

export default {
  data() {
    return {
      saveDisabled:true,
      step: '>',
      back: "<",
      score: 0,
      scorePercent: 0,
      openingColumn: [
        {
          key: 'isDatabase',
          width: 120
        },
        {
          key: 'open'
        },
        {
          key: 'openEn'
        },
      ],
      openingData: [
        {
          isDatabase: '开局库数据',
          open: "初始局面",
          openEn: "Initial board",
        }
      ],
      modalSaveFgn: false,
      formFgn: {
        name: '',
        nameEn: '',
      },
      // 分析按钮 loading动画控制
      analyzeLoading:false,
    }
  },
  methods: {
    // 新游戏
    newGame() {
      bus.$emit("newGame", null);
      this.openingData = [
        {
          isDatabase: "开局库数据",
          open: "初始局面",
          openEn: "Initial board",
        }
      ]
    },
    saveFgn() {
      this.modalSaveFgn = true;
      // 不清空表单数据 因为有些时候对局是连续的 开局名字有可能使用多次
      // this.formFgn = {
      //   name: '',
      //   nameEn: '',
      // }
    },
    analyze() {
      bus.$emit("analyze", null);
    },
    updatePercent() {
      this.scorePercent = this.score + 50;
    },
    ok() {
      //防止误操作导致多余的空格
      this.formFgn.name = this.formFgn.name.trim();
      this.formFgn.nameEn = this.formFgn.nameEn.trim();

      //防止数据库出现错误数据
      if (this.formFgn.name === '' || this.formFgn.nameEn === '') {
        this.$Message.error('对局名称或对局英文名称不能为空!');
        return;
      }
      bus.$emit('saveFgn', this.formFgn);


    },
    cancel() {
      this.$Message.info('取消保存局面');
    },
    setBack() {
      bus.$emit('back', null);
    },
    setStep() {
      bus.$emit('step', null);
    },
    updateScore(score) {
      this.scorePercent = utils.getScorePercent(score)
      this.score = score > 0 ? "+" + score.toString() : score.toString();
    },
  },
  mounted() {
    this.updatePercent();
    bus.$on('updateFenName', (value) => {
      if (value.name_en === 'unknown' && this.openingData[0].openEn !== 'Initial board') {
        // 如果传过来的数据是未知对局 但已经获取到了开局名称 这个时候不进行更新
        this.$Message.warning('没有获取到开局名称');
        return;
      }
      this.openingData = [
        {
          isDatabase: "开局库数据",
          open: value.name,
          openEn: value.name_en,
        }
      ]
    })
    bus.$on('updateScore', (score) => {
      this.updateScore(score);
    });
    bus.$on('enabledSave',()=>{
      this.saveDisabled = false;
    });
    bus.$on('updateAnalyzeLoading',(value)=>{
      this.analyzeLoading = value;
    })

  },
}
</script>

<style>

</style>
